<template>
  <div>
    <el-page-header content="添加业主" icon="" title="业主信息管理" />
  </div>
  <el-form
    ref="propFormRef"
    :model="propForm"
    :rules="propFormRules"
    label-width="80px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="业主名字" prop="propname">
      <el-input v-model="propForm.propname" />
    </el-form-item>

    <el-form-item label="业主电话" prop="propnumber">
      <el-input v-model="propForm.propnumber" />
    </el-form-item>

    <el-form-item label="业主邮箱" prop="propemail">
      <el-input v-model="propForm.propemail" />
    </el-form-item>

    <el-form-item label="楼号" prop="building">
        <el-select
          v-model="propForm.building"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="房号" prop="roomnumber">
        <el-select
          v-model="propForm.roomnumber"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="房屋面积" prop="roomarea">
        <el-select
          v-model="propForm.roomarea"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()">更新提交</el-button>
      </el-form-item>
  </el-form>
  <el-dialog v-model="dialogVisible" title="" width="50%">
      <div style="line-height: 50px;text-align: center;">
        <h2>不能重复创建一个业主的数据</h2>
      </div>
    </el-dialog>
</template>

<script setup>
import { ref, reactive,onMounted, } from "vue";
import axios from "axios"
import upload from "@/util/upload"
import {useRouter} from "vue-router"

const dialogVisible = ref(false);
const propFormRef = ref();
const propForm = reactive({
  propname: "",
  propnumber: null,
  propemail: "",
  building: 1,
  roomnumber: 101,
  roomarea: 80,
});

const propFormRules = reactive({
  propname: [{ required: true, message: "请输入业主名字", trigger: "blur" }],
  propnumber: [
    { required: true, message: "请输入业主电话", trigger: "blur" },
    { min: 11, max: 11, message: "电话号码必须是十一位", trigger: "blur" },
    // { type: "number", message: "电话号码必须是数字" },
  ],
  propemail: [{ required: true, message: "请输入业主邮箱", trigger: "blur" }],
  building: [{ required: true, message: "请选择楼号", trigger: "blur" }],
  roomnumber: [{ required: true, message: "请选择房号", trigger: "blur" }],
  roomarea: [{ required: true, message: "请选择房屋面积", trigger: "blur" }],
});

//下拉选项
const options1 = [
  {
    label: "1#",
    value: 1,
  },
  {
    label: "2#",
    value: 2,
  },
  {
    label: "3#",
    value: 3,
  },
];

const options2 = [
  {
    label: "101",
    value: 101,
  },
  {
    label: "102",
    value: 102,
  },
  {
    label: "201",
    value: 201,
  },
  {
    label: "202",
    value: 202,
  },
  {
    label: "301",
    value: 301,
  },
  {
    label: "302",
    value: 302,
  },
  {
    label: "401",
    value: 401,
  },
  {
    label: "402",
    value: 402,
  },
]

const options3 =[
{
    label: "80",
    value:80,
  },
  {
    label: "100",
    value:100,
  },
  {
    label: "120",
    value:120,
  },
]
const router = useRouter()

const submitForm = async ()=>{
  
  //if(String(propForm.building)+String(propForm.roomnumber)!=ra)
  propFormRef.value.validate(async(valid)=>{
            
            if(valid){
              //先判断表单是否ok   
                var res = await axios.get("/adminapi/prop/list");
                for(let i=0;i<res.data.data.length;i++){ //循环获取值  判断是否数据库中有输入的值
                  if(res.data.data[i].building+res.data.data[i].roomnumber === 
                  String(propForm.building)+String(propForm.roomnumber)){
                    dialogVisible.value = true;
                  }
                }
                //再看是否已有数据
                if(!dialogVisible.value){
                  await upload("adminapi/prop/add",propForm)
                  router.push(`/proprietor-manage/proprietormsg`)
                }
                
            }
            
    })

}


</script>


<style scoped lang="scss">
.demo-ruleForm {
  margin-top: 50px;
}
.el-row {
  margin-top: 20px;
  .box-card {
    text-align: center;
  }
}

.custom-alert{  
  padding: 20px;  
  background-color: #f44336; /* 红色背景 */  
  color: white; /* 白色文本 */  
  border-radius: 5px; /* 圆角边框 */  
}
</style>
